<template>
  <div style="padding-bottom: 50px">
    <div class="course-comment mt_20" v-if="pjList.length > 0">
      <div class="course-comment-top">
        <div class="score">{{ pjInfo.gradeAvg }}</div>
        <div class="score-desc">
          <p>好评{{ pjInfo.goodsEvRate }}%</p>
          <Rate allow-half disabled :value="Number(pjInfo.gradeAvg)" />
        </div>
        <div class="comment-total">
          <div>
            <Tag color="default">全部{{ pjInfo.evTotalCount }}</Tag>
            <Progress :percent="100" :stroke-color="['#FF6E56', '#FAD126']" />
          </div>
          <div>
            <Tag color="default">好评{{ pjInfo.goodsEvCount }}</Tag>
            <Progress
              :percent="pjInfo.goodsEvRate"
              :stroke-color="['#FF6E56', '#FAD126']"
            />
          </div>
          <div>
            <Tag color="default">中评{{ pjInfo.midEvCount }}</Tag>
            <Progress
              :percent="pjInfo.midEvRate"
              :stroke-color="['#FF6E56', '#FAD126']"
            />
          </div>
          <div>
            <Tag color="default">差评{{ pjInfo.badEvCount }}</Tag>
            <Progress
              :percent="pjInfo.badEvRate"
              :stroke-color="['#FF6E56', '#FAD126']"
            />
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <List item-layout="vertical" class="parent-box">
        <ListItem v-for="(item, index) in pjList" :key="index">
          <ListItemMeta
            :avatar="item.evaluaterFace"
            :title="item.userName"
            :description="item.userEvaluateTime"
          />
          {{ item.content }}
          <template slot="extra">
            <div class="list-item">
              <div class="list-c">
                <div class="text">
                  <p>
                    <span
                      style="
                        font-size: 12px;
                        font-weight: bold;
                        padding-right: 5px;
                      "
                      >{{ item.grade }}</span
                    ><Rate allow-half disabled :value="item.grade" />
                  </p>
                  <p class="desc" v-html="item.userEvaluate"></p>
                </div>
                <div class="btn-box">
                  <span @click="goFrend(item, index)"
                    ><Icon type="ios-text-outline" size="18" />{{
                      item.childCount
                    }}</span
                  ><span
                    ><Icon
                      type="ios-thumbs-up-outline"
                      size="18"
                      @click="replyHandle(index)"
                    />{{ item.likes }}</span
                  >
                </div>
              </div>
              <div class="child-box" v-if="item.child.length > 0">
                <!-- 前三条子评论 -->
                <List
                  item-layout="vertical"
                  class="child-list"
                  v-for="(info, ind) in item.child.slice(0, 3)"
                  :key="info.id"
                >
                  <ListItem>
                    <ListItemMeta
                      :avatar="info.evaluaterFace"
                      :title="info.userName"
                      :description="info.userEvaluateTime"
                    />
                    {{ info.content }}
                    <template slot="extra">
                      <div class="child-list-c">
                        <div class="child-text">
                          <p>回复 {{ info.replyToName }}：</p>
                          <p class="desc" v-html="info.userEvaluate"></p>
                        </div>
                        <div class="btn-box">
                          <span @click="goBackClick(item, info, index, ind)"
                            >回复</span
                          ><span
                            ><Icon
                              type="ios-thumbs-up-outline"
                              size="18"
                              @click="addBaseZ(index, ind)"
                            />{{ info.likes }}</span
                          >
                        </div>
                      </div>
                    </template>
                  </ListItem>
                  <div  class="reply-box" v-if="answerBoxId==info.id">
                    <Input
                      v-model="inputValue"
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 6 }"
                      :placeholder="`回复${goBackObj.evname}:`"
                    ></Input>
                    <div
                      style="text-align: right; width: 100%; padding-top: 10px"
                    >
                      <Button type="error" @click="goSubmit(ind)">提交</Button>
                    </div>
                  </div>
                </List>
                <!-- 展示更多的子评论 -->
                <List
                  item-layout="vertical"
                  class="child-list"
                  v-for="(info, ind) in item.child.slice(3, item.child.length)"
                  :key="info.id"
                  v-show="!item.childMore"
                >
                <ListItem>
                    <ListItemMeta
                      :avatar="info.evaluaterFace"
                      :title="info.userName"
                      :description="info.userEvaluateTime"
                    />
                    {{ info.content }}
                    <template slot="extra">
                      <div class="child-list-c">
                        <div class="child-text">
                          <p>
                            <!--{{ info.grade }}<Rate disabled :value="info.grade" />-->
                            回复 {{ info.replyToName }}：
                          </p>
                          <p class="desc" v-html="info.userEvaluate"></p>
                        </div>
                        <div class="btn-box">
                          <span @click="goBackClick(item, info, index, ind+3 )"
                            >回复</span
                          ><span
                            >
                            <!-- ind+3是因为前三条和后面几条都是重新独自渲染的 -->
                            <Icon
                              type="ios-thumbs-up-outline"
                              size="18"
                              @click="addBaseZ(index, ind+3)"
                            />{{ info.likes }}</span
                          >
                        </div>
                      </div>
                    </template>
                  </ListItem>
                  <div  class="reply-box" v-if="answerBoxId==info.id">
                    <Input
                      v-model="inputValue"
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 6 }"
                      :placeholder="`回复${goBackObj.evname}:`"
                    ></Input>
                    <div
                      style="text-align: right; width: 100%; padding-top: 10px"
                    >
                      <Button type="error" @click="goSubmit(index,ind)">提交</Button>
                    </div>
                  </div>
                  <!-- <div  class="reply-box" v-if="answerBoxId==info.id">
                    <Input
                      v-model="info.inputValue"
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 6 }"
                      :placeholder="`回复${goBackObj.evname}:`"
                    ></Input>
                    <div
                      style="text-align: right; width: 100%; padding-top: 10px"
                    >
                      <Button type="error" @click="goSubmit(ind)">提交</Button>
                    </div>
                  </div> -->
                </List>
                <div
                  class="search-all"
                  @click="goMore(index)"
                  v-if="item.child.length > 3 && item.childMore"
                >
                  <span>查看全部回复</span>
                </div>
              </div>
              <div class="reply-box" v-if="mainAnswerId==item.id">
                <Input
                  v-model="item.goFrendInput"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 6 }"
                  :placeholder="`回复${goFrendObj.evname}:`"
                ></Input>
                <div style="text-align: right; width: 100%; padding-top: 10px">
                  <Button type="error" @click="goFrendSubmit(index)"
                    >提交</Button
                  >
                </div>
              </div>
            </div>
          </template>
        </ListItem>
        <div class="search-all" v-if="!lastPage" @click="addList">
          <span>查看更多回复</span>
        </div>
      </List>
    </div>
    <div
      style="width: 100%; text-align: center; flex: 24px; padding-top: 100px"
      v-else
    >
      暂无评论
    </div>
  </div>
</template>

<script>
import {
  getCourseContInfo,
  getCourseContPage,
  setCourseUserPlz,
  getBaseCourseTextId,
} from "@/api/yk_record";

export default {
  name: "CourseComment",
  props: {
    courseId: {
      type: String,
      required: "",
    },
  },
  data() {
    return {
      inputValue:"",//输入框
      mainAnswerId:null,//一级回复id
      answerBoxId:null,//二级回复id
      rateScore: 4.8,
      courseData: {}, //课程数据，后期本地取
      //   模拟数据
      commentList: [],
      page: {
        page: 1,
        rows: 5,
        courseSeriesId: "",
      },
      goBackObj: {},
      pjInfo: {},
      pjList: [],
      itemObj: {},
      lastPage: false,
      goFrendShow: false,
      goFrendInput: "",
      goFrendObj: {},
      childMore: false,
    };
  },
  mounted() {
    this.getPjPageList();
    this.getPjData();
  },
  methods: {
    //主回复
    goFrend(item, index) {
      this.inputValue=''
      this.mainAnswerId= this.mainAnswerId==item.id?null:item.id
      this.answerBoxId=null
      this.goFrendObj = item;
      this.pjList[index].goFrendShow = !this.pjList[index].goFrendShow;
      this.pjList[index].goFrendInput = "";
      this.$forceUpdate();
    },
    goFrendSubmit(index) {
      let params = {
        courseSeriesId: this.courseId,
        evaluateType: "1",
        pid: this.goFrendObj.id,
        userEvaluate: this.goFrendObj.goFrendInput,
      };
      getBaseCourseTextId(params).then((res) => {
        if (res.code == "200") {
          this.$Message.success("回复成功!");
          this.goFrendShow = false;
          this.getPjPageList();
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //点赞
    replyHandle(index) {
      
      this.setHand(this.pjList[index].id,index);
    },
    //子评论点赞
    addBaseZ(index, ind) {
      this.setHand(this.pjList[index].child[ind].id,index,ind);
    },
    //提交点赞
    setHand(id,index,ind) {
      console.log(id,index,ind,55555);
      let params = {
        id: id,
        evaluateOperType: "0",
      };
      setCourseUserPlz(params).then((res) => {
        if (res.code == "200") {
          if(ind==0||ind){
            this.pjList[index].child[ind].likes = Number(this.pjList[index].child[ind].likes) + 1;
          }else{
            this.pjList[index].likes = Number(this.pjList[index].likes) + 1;
          }
          this.$Message.success(" 点赞成功!");
        } else {
          this.$Message.error(res.message || "点赞失败!");
        }
      });
    },
    //评论基本详情
    getPjData() {
      getCourseContInfo(this.courseId).then((res) => {
        if (res.code == "200") {
          this.pjInfo = res.result;
          this.pjInfo.goodsEvRate = Number(
            (res.result.goodsEvRate * 100).toFixed(0)
          );
          this.pjInfo.midEvRate = Number(
            (res.result.midEvRate * 100).toFixed(0)
          );
          this.pjInfo.badEvRate = Number(
            (res.result.badEvRate * 100).toFixed(0)
          );
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //获取评论分页
    getPjPageList() {
      this.page.courseSeriesId = this.courseId;
      getCourseContPage(this.page).then((res) => {
        if (res.code == "200") {
          let data = res.result.records;
          data.forEach((item) => {
            item.goFrendShow = false;
            item.goFrendInput = "";
            if (item.child.length > 3) {
              item.childMore = true;
            } else {
              item.childMore = false;
            }
            item.child.forEach((a) => {
              a.inputShow = false;
              a.inputValue = "";
            });
          });
          this.pjList = data;
          this.pjListObj = res.result;
          this.answerBoxId=null
          this.mainAnswerId=null
          this.inputValue=""
          //判定最后一条
          if (this.pjListObj.current == this.pjListObj.pages) {
            this.lastPage = true;
          }
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //更多子评论
    goMore(index) {
      this.pjList[index].childMore = false;
    },
    //更多评论
    addList() {
      if (this.pjListObj.current != this.pjListObj.pages) {
        this.page.rows = this.page.rows + 5;
        this.getPjPageList();
        this.lastPage = false;
      } else {
        this.lastPage = true;
      }
    },
    //回复子评论
    goBackClick(item, a, index, ind) {
      this.inputValue=""
      this.answerBoxId= this.answerBoxId==a.id?null:a.id  //唯一值，为了隐藏其他输入框
      this.mainAnswerId=null
      this.pjList[index].child[ind].inputShow =
        !this.pjList[index].child[ind].inputShow;
      this.inputValue = "";
      this.goBackObj = a;
      this.itemObj = item;
      this.$forceUpdate();
    },
    //提交评价
    goSubmit(ind) {
      let params = {
        courseSeriesId: this.courseId,
        evaluateType: "1",
        pid: this.goBackObj.id,
        userEvaluate: this.inputValue,
      };
      getBaseCourseTextId(params).then((res) => {
        if (res.code == "200") {
          this.$Message.success("回复成功!");
          this.getPjPageList();
          this.inputValue=''
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; //控制显示几行
  -webkit-box-orient: vertical; //webbox方向
}

// 课程评论
.course-comment {
  width: 100%;
  min-height: calc(475 / 1920 * 100vw);
  padding: 0 calc(54 / 1920 * 100vw) calc(15 / 1920 * 100vw);
  background: #ffffff;
  // box-shadow: 0px 4px 16px 0px rgba(234, 234, 234, 0.78);
  // border-radius: 10px;
  .course-comment-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc(150 / 1920 * 100vw);
    margin-bottom: calc(20 / 1920 * 100vw);
    .score {
      font-size: calc(60 / 1920 * 100vw);
      font-weight: bold;
      color: #181818;
      line-height: calc(52 / 1920 * 100vw);
      margin-right: calc(5 / 1920 * 100vw);
    }
    .score-desc {
      margin-right: calc(46 / 1920 * 100vw);
    }
    // 评论统计
    .comment-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      flex: 1;
      > div {
        display: flex;
        align-items: center;
        width: 50%;
        // 标签样式
        .ivu-tag {
          width: calc(80 / 1920 * 100vw);
          height: calc(26 / 1920 * 100vw);
          background: #f0f0f0;
          border-radius: calc(4 / 1920 * 100vw);
          box-sizing: content-box;
          line-height: calc(28 / 1920 * 100vw);
          text-align: center;
          margin-right: calc(10 / 1920 * 100vw);
        }
      }
    }
  }
}
// 评论列表

::v-deep .ivu-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  //   height: calc(135 / 1920 * 100vw);
  padding: 0 calc(56 / 1920 * 100vw);
  background: #f9f9f9;
  border: none;
  margin-bottom: calc(15 / 1920 * 100vw);
  border-radius: calc(4 / 1920 * 100vw);
  box-sizing: border-box;
  .ivu-list-item-main {
    display: flex;
    align-items: center;
    flex: auto;
    .ivu-list-item-meta {
      margin-bottom: 0;
      .ivu-avatar {
        width: calc(60 / 1920 * 100vw);
        height: calc(60 / 1920 * 100vw);
      }
      .ivu-list-item-meta-title {
        font-size: 16px;
        font-family: "Source Han Sans SC";
        font-weight: 400;
        color: #070a0c;
        line-height: calc(24 / 1920 * 100vw);
      }
      .ivu-list-item-meta-description {
        font-size: calc(12 / 1920 * 100vw);
        font-family: "Source Han Sans SC";
        font-weight: 400;
        color: #cbcbcb;
        line-height: calc(24 / 1920 * 100vw);
      }
    }
  }
  textarea.ivu-input {
    background: #f9f9f9;
  }
  .ivu-list-item-extra {
    flex: 100;
    display: flex;
    .list-item {
      width: 100%;
    }
  }
}
.list-c {
  flex: 1;
  display: flex;
}
.btn-box {
  display: inline-flex;
  align-items: flex-end;
  span {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    .ivu-icon {
      margin-right: 3px;
    }
  }
}
.search-all {
  color: #176eff;
  display: flex;
  justify-content: center;
  margin-top: calc(13 / 1920 * 100vw);
  > span {
    cursor: pointer;
  }
}

//回复
.reply-box {
  padding: 10px 0;
  background: #f9f9f9;
}
.parent-box {
  .ivu-list-item {
    align-items: baseline;
    padding: 10px 10px 10px 50px;
  }
}
.child-box {
  border-radius: 10px;
  margin: 10px 0;
  .child-list {
    .child-list-c {
      display: flex;
      flex: 1;
      .child-text {
        flex: 1;
      }
    }
    .ivu-list-item {
      padding: 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e3e3e3;
      align-items: center;
      margin-bottom: 0;
    }
    &:last-of-type {
      border: none;
    }
  }
}
</style>
